<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>banlingkit</title>
    <meta name="keywords" content="banlingkit, Customer Complaint Feedback Center" />
    <meta name="description" content="banlingkit, Customer Complaint Feedback Center" />
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body class="container">
    <div style="display:flex;justify-content: space-between;align-items: center;">
        <h1
            style="margin: 0px; display: inline-block; padding: 0px 8px 6px 8px; background: #000; color: #FFF; font-variant: all-small-caps;">
            banlingkit</h1>
        <select name="changeLanguage" class="changeLanguage" id="changeLanguage" disabled>
            <option value="English">English</option>
            <option value="German">German</option>
            <option value="French">French</option>
            <option value="Spanish">Spanish</option>
            <option value="Italian">Italian</option>
            <option value="Dutch">Dutch</option>
            <option value="Portuguese">Portuguese</option>
            <option value="Swedish">Swedish</option>
            <option value="Polish">Polish</option>
            <option value="Romanian">Romanian</option>
            <option value="Greek">Greek</option>
            <option value="Bulgarian">Bulgarian</option>
            <option value="Czech">Czech</option>
            <option value="Danish">Danish</option>
            <option value="Estonian">Estonian</option>
            <option value="Finnish">Finnish</option>
            <option value="Hungarian">Hungarian</option>
            <option value="Irish">Irish</option>
            <option value="Latvian">Latvian</option>
            <option value="Lithuanian">Lithuanian</option>
            <option value="Maltese">Maltese</option>
            <option value="Slovak">Slovak</option>
            <option value="Slovenian">Slovenian</option>
            <option value="Croatian">Croatian</option>
        </select>
    </div>

    <!-- <span class="title"><span id="label-title">Customer Complaint Feedback Center</span></span> -->

    <form class="form" id="orderFrom">
        <!--邮箱-->
        <div class="form-item">
            <label><span id="label-email">Email address (Your mail box)</span><i>*</i></label>
            <input id="email" name="email" type="text" />
        </div>
        <!--物流号-->
        <div class="form-item order-box">
            <label><span id="label-order">Logistics number (The number corresponding to the bar code on the label)</span><i>*</i></label>
            <input id="order" name="order" type="text" />
        </div>
        <input id="sendEmailType" name="sendEmailType" type="hidden" />
        <input id="complaintId" name="complaintId"  type="hidden" />
        <input id="complainStatus" name="complainStatus" type="hidden" />

        <!--账户名-->
        <div class="form-item">
            <label><span id="label-accountName">Account Name</span><i>*</i></label>
            <input id="accountName" name="accountName" type="text" disabled />
        </div>
        <!--银行名称-->
        <div class="form-item">
            <label><span id="label-bankName">Bank Name</span><i>*</i></label>
            <input id="bankName" name="bankName" type="text" disabled />
        </div>
        <!--银行地址-->
        <div class="form-item">
            <label><span id="label-bankAddress">Bank Address</span><i>*</i></label>
            <input id="bankAddress" name="bankAddress" type="text" disabled />
        </div>
        <!--银行卡号-->
        <div class="form-item">
            <label><span id="label-bankNumber">Bank Number</span><i>*</i></label>
            <input id="bankNumber" name="bankNumber" type="text" disabled />
        </div>
        <!--Swift-->
        <div class="form-item">
            <label><span id="label-swiftCode">Swift Code</span><i>*</i></label>
            <input id="swiftCode" name="swiftCode" type="text" disabled />
        </div>
        <!--面单图片地址-->
        <div class="form-item">
            <label><span id="label-fileName">FileName</span><i>*</i></label>
            <input id="fileName" name="fileName" type="text" disabled />
        </div>
        <!--投诉原因-->
        <div class="form-item order-box">
            <label><span id="label-complaintCause">Complaint Cause</span><i>*</i></label>
            <input id="complaintCause" name="complaintCause" type="text" disabled />
        </div>
        <!--投诉原因英文描述-->
        <div class="form-item order-box">
            <label><span id="label-complaintDescription">Complaint Description</span><i>*</i></label>
            <input id="complaintDescription" name="complaintDescription" type="text" disabled />
        </div>
        <!--投诉原因中文描述-->
        <div class="form-item ">
            <label><span id="label-chineseComplaintCause">ComplaintStatus</span><i>*</i></label>
            <input id="chineseComplaintCause" name="chineseComplaintCause" type="text" disabled />
        </div>
        <!--退款级别-->
        <div class="form-item">
            <label><span id="label-refundLevelInfo">Refund Info</span><i>*</i></label>
            <input id="refundLevelInfo" name="refundLevelInfo" type="text" disabled />
        </div>
        <!--审核信息描述-->
        <div class="form-item ">
            <label><span id="label- auditorDescription">AuditorDescription</span><i>*</i></label>
            <input id=" auditorDescription" name="auditorDescription" type="text" disabled />
        </div>

        <!--客诉状态英文-->
        <div class="form-item order-box">
            <label><span id="label-complainStatusEnDescription">ComplaintStatus</span><i>*</i></label>
            <input id="complainStatusEnDescription" name="complainStatusEnDescription" type="text" disabled />
        </div>
        <!--客诉状态中文-->
        <div class="form-item">
            <label><span id="label-complainStatusChnDescription">ComplaintStatus</span><i>*</i></label>
            <input id="complainStatusChnDescription" name="complainStatusChnDescription" type="text" disabled />
        </div>
        <!--当前操作状态-->
        <div class="form-item">
            <label><span id="label-currentOperatingState">CurrentOperatingState</span><i>*</i></label>
            <input id="currentOperatingState" name="currentOperatingState" type="text" disabled />
        </div>
    </form>
    <button class="btn querybtn"><span id="querybtn"> Query</span></button>
    <div id="submit-error" class="input-item-error"></div>
    <!-- 上传图片 Modal -->
    <div class="modal" tabindex="-1" id="uploadImgModal">
        <div class="modal-dialog uploadImagedialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title ">Upload image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="select-img">
                        <input type="file" accept=".jpeg,.png,.jpg" id="upload">
                        <img src="" alt="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Yes or No  Modal -->
    <div class="modal" tabindex="-1" id="yesNoModal">
        <div class="modal-dialog">
            <div class="modal-content modal-max-width">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm option</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="yesNo-modal-body">
                    <div class="content">

                    </div>
                    <form id="yesNoForm">
                        <div class="mb-3">
                            <div class="d-flex justify-content-start reason-radio-box">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="yesRadios" value="10">Yes
                                    </label>
                                </div>
                                <div class="radio" style="margin-left: 1%">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="NoRadios" value="11">No
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 cause-box" style="display: none;">
                            <label for="reason-text" class="col-form-label">Cause:</label>
                            <textarea class="form-control" id="cause-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 投诉内容 Modal -->
    <div class="modal" tabindex="-1" id="complaintModal" >
        <div class="modal-dialog ">
            <div class="modal-content modal-max-width">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="complaintForm">
                        <div class="mb-3">
                            <label for="reason-text" class="col-form-label">Cause of complaint:</label>
                            <textarea class="form-control" id="reason-text" name="reason-text"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="col-form-label">Reason:</label>
                            <div class="d-flex flex-column reason-radio-box">
                                <label for="reason1">
                                    <input type="radio" value="1" name="reason" id="reason1" /> It's not the right size. I'd like to exchange it</label>
                                <label for="reason2">
                                    <input type="radio" value="2" name="reason" id="reason2" /> It's not the right size. I'd like a refund</label>

                                <label for="reason3">
                                    <input type="radio" value="3" name="reason" id="reason3" /> I am not satisfied with the quality of the products I received and would like a refund</label>

                                <label for="reason4">
                                    <input type="radio" value="4" name="reason" id="reason4" /> The product received is not the same as the one ordered </label>

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 同意退款 Modal -->
    <div class="modal" tabindex="-1" id="refundModal">
        <div class="modal-dialog">
            <div class="modal-content modal-max-width">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="content">

                    </div>
                    <div class="content1" style="margin-top: 5%">

                    </div>
                </div>
                <div class="modal-footer" style="flex-wrap: nowrap;">
                    <button type="button" class="btn btn-secondary refuseBtn">Refuse</button>
                    <button type="button" class="btn btn-success" id="btnConsentSuccess">Consent</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 账户信息表单 Modal -->
    <div class="modal" tabindex="-1" id="accountInfoModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="accountInfoForm">
                        <div class="mb-3">
                            <label for="account-name" class="col-form-label"><i>*</i> Account name: </label>
                            <input class="form-control" id="account-name" name="account-name"></input>
                        </div>
                        <div class="mb-3">
                            <label for="refund-account-number" class="col-form-label"><i>*</i> Refund account
                                number:</label>
                            <input class="form-control" name="refund-account-number" id="refund-account-number"
                                placeholder="Enter refund account" name="refund-account-number"></input>
                        </div>
                        <div class="mb-3">
                            <label for="bank-name" class="col-form-label"><i>*</i> Bank name:</label>
                            <input class="form-control" id="bank-name" name="bank-name"></input>
                        </div>
                        <div class="mb-3">
                            <label for="bank-address" class="col-form-label"><i>*</i> Bank address:</label>
                            <input class="form-control" id="bank-address" name="bank-address"></input>
                        </div>
                        <div class="mb-3">
                            <label for="swift-code" class="col-form-label"><i>*</i> SWIFT code:</label>
                            <input class="form-control" id="swift-code" name="swift-code"> </input>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 提示弹出框 -->
    <div class="toast-container">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <rect width="100%" height="100%" fill="#007aff"></rect>
                </svg>
                <strong class="me-auto">Tips</strong>
                <small></small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
            </div>
        </div>
    </div>

</body>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/request.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>

</html>